<template>
  <div class="card-page">
    <tool-bar nav="" :title="action_name + 'Api故事'">
      <el-button size="small" @click="exec_click" type="primary">执行!</el-button>
      <el-button size="small" @click="sync_click" type="primary">同步Api!</el-button>
      <el-button size="small" @click="$router.push('/dev/api-story/add')" v-if="$props.action=='edit'">新建</el-button>
      <el-button size="small" @click="save_click" type="primary">保存</el-button>
    </tool-bar>
    <div class="card">
      <kv label="name">
        <el-input v-model="info.name" chk="*"/>
      </kv>
      <kv label="apiAddress">
        <el-input v-model="info.apiAddress"/>
      </kv>
    </div>
    <div>
      <ref-table-api-instance title="Api接口" v-model="info" @load="loadData">
      </ref-table-api-instance>
    </div>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2023-10-19 21:33:22
 */

import RefTableApiInstance from "./ref-table-api-instance.vue"





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  info: {
    apis: [],
    createBy: {},
  }, //子对象需要声明。

  HttpMethod: jv.enum.HttpMethod.getData(),
  ApiParameterTypeEnum: jv.enum.ApiParameterTypeEnum.getData(),
  ApiParameterStringTypeEnum: jv.enum.ApiParameterStringTypeEnum.getData(),
  ApiJsonLocationEnum: jv.enum.ApiJsonLocationEnum.getData(),
});
const info = $computed(() => $data.info);

const $props = defineProps({
  action: {type: String},
  id: {type: String}
});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const action_name = $computed(function () {
  return {add: "添加", edit: "修改"}[$props.action]
});

const loadData = async function (callback) {
  if (!$props.id) return;
  let res = await jv.$http.post("/dev/api-story/detail/" + $props.id)
  $data.info = res.data.data;

  //添加 apis 伪id


  nextTick(callback)
};
const sync_click = async function () {
  let res = await jv.$http.post("/dev/api-story/sync-api?id=" + $props.id);
  jv.info("同步成功");
};
const exec_click = async function () {
  let res = await jv.$http.post("/dev/api-story/run/" + $props.id);
  jv.info("执行成功");
  location.reload();
};
const save_click = async function () {
//校验
  if (jv.chk_main() == false) {
    return;
  }
  let res = await jv.$http.post("/dev/api-story/save", $data.info)
  //[axios拦截器中已处理了异常]。
  jv.info(action_name + " 成功");
  let id = res.data.data || $data.info.id;
  if (!id) {
    return jv.error("找不到 id");
  }
  jv.$router.push("/dev/api-story/edit/" + id);
};

onMounted(function () {
  loadData();
})


</script>

<style scoped lang="scss">
</style>
